<template>
	<div class="container-page">
		<div class="container-bdody">
			<div class="customer-setting-content">
				<div class="sort-options">
					<div class="sort-item" v-for="(option, index) in order1_ls" :key="index"
						:class="{ active: option.value == objectForm.qrcode_i }" @click="selectSort1Option(option)">
						<span class="font_size16">{{ option.label }}</span>
						<span v-if="option.value == objectForm.qrcode_i" class="check-icon">✓</span>
					</div>
				</div>
			</div>
		</div>
		<div class="container-footer flex_between">
			<div class="summary-info"></div>
			<div class="action-buttons">
				<el-button type="primary" @click="submitHandle" size="large" class="btn-confirm"> 保 存 </el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, defineProps, defineEmits, watch, computed } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
const { proxy } = getCurrentInstance()
import { printTypeList } from '@/utils/dict.js'
const props = defineProps({
	propData: {
		type: Object,
		default: () => ({})
	}
})
const emit = defineEmits(['success-handle'])
const objectForm = ref({...props.propData})
const order1_ls = ref([...printTypeList])
const selectSort1Option = (option) => {
	objectForm.value.qrcode_i = option.value
}

// 提交保存
const submitHandle = async () => {
	try {
		const params = {
			...objectForm.value,
		}
		let res = await proxy.$api({ url: config.compset_print_set_save, data: params })
		if (res.status == 1) {
			proxy.$message.success('保存成功')
			emit('success-handle', res.data)
		} else {
			proxy.$message.error(res?.msg || '保存失败')
		}
	} catch (error) {
		proxy.$message.error('保存失败')
	}
}

onMounted(async () => {})
</script>

<style lang="scss" scoped>
.container-page {
	width: 100%;
	height: 100%;
	max-height: 100vh;
	/* 限制最大高度为视窗高度 */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;

	/* 防止整体容器溢出 */
	.container-bdody {
		box-sizing: border-box;
		flex: 1;
		height: 0;
		/* 关键修复：设置高度为0，让flex-grow生效 */
		min-height: 0;
		/* 确保flex项可以收缩 */
		overflow-y: auto;
	}

	.container-footer {
		border-top: 1px solid #f1f1f1;
		margin-top: 10px;
		padding: 14px 10px 4px;

		.summary-info {
			display: flex;
			align-items: center;
			gap: 16px;
		}

		.action-buttons {
			display: flex;
			gap: 12px;

			.btn-cancel {
				border-color: #cbd5e1;
				color: #64748b;
			}

			.btn-confirm {
				background-color: #3b82f6;
				border-color: #3b82f6;
			}
		}
	}
}

.customer-setting-content {
	width: 100%;
}


/* 排序选项区域 */
.sort-options {
	background-color: #f8f9fa;
	border-radius: 6px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.sort-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	cursor: pointer;
	transition: background-color 0.2s;
	border-bottom: 1px solid #eee;
}

.sort-item:hover {
	background-color: #e9ecef;
}

.sort-item.active {
	color: #3b82f6;
	font-weight: 500;
}

.check-icon {
	font-size: 16px;
}
</style>